export const colors =  ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
export const legend = {
    show: true,
    left: 'center', // left、center、right
    top: 'top', // top、middle、bottom
    orient: 'horizontal', // horizontal、vertical
    itemWidth: 25,
    itemHeight: 14,
    itemGap: 10,
    icon: 'roundRect',
    textStyle: {
    fontSize: 14,
      color: '#FFF'
  }
}
export const tooltip = {
  show: true,
  trigger: 'axis', // axis, item
  formatter: ''
}

export const colorRange = { // 渐变色
  show: false,
  colors: [
    ['#5470c6', 'rgba(84,112,198, 0.1)', '#5470c6'],
    ['#91cc75', 'rgba(145,204,117, 0.1)', '#91cc75'],
    ['#fac858', 'rgba(250,200,88, 0.1)', '#fac858'],
  ]
}

// 图表-基础配置
export const getBaseChartConfig = () => {
  return {
    direction: '0', // 0竖向，1横向
    isStack: false, // 是否堆叠
    colorRange,
    color: colors,
    grid: {
      top: '30',
      right: '30',
      bottom: '30',
      left: '40'
    },
    tooltip,
    legend,
    yAxis: {
      type: 'value',
      show: true,
      name: '',
      nameLocation: 'end',
      nameTextStyle: {
        color: '#FFF',
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2589ff'
        }
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        show: true,
        color: '#FFF',
        fontSize: 14,
        rotate: 0
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['rgba(144, 183, 234, 0.5)', 'rgba(144, 183, 234, 0.5)'],
          type: 'dashed',
          width: 1
        }
      }
    },
    xAxis: {
      type: 'category',
      show: true,
      name: '',
      nameLocation: 'end',
      nameTextStyle: {
        color: '#FFF',
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2589ff'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#FFF',
        fontSize: 14,
        rotate: 0
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#2589ff'
        }
      }
    }
  }
}

// 图表-填充基本数据
export const getBaseChartOption = (attribute, hasXY = true) => {
  const {grid, tooltip, color, legend, yAxis, xAxis} = attribute
  const opt = {
    grid: {
      ...grid
    },
    color: color,
    tooltip: {
      ...tooltip
    },
    legend: {
      show: legend.show,
      left: legend.left,
      top: legend.top,
      orient: legend.orient,
      itemWidth: legend.itemWidth,
      itemHeight: legend.itemHeight,
      itemGap: legend.itemGap,
      icon: legend.icon,
      textStyle: {
        fontSize: legend.textStyle.fontSize,
        color: legend.textStyle.color
      }
    }
  }

  if(hasXY) {
    opt.yAxis = {
      show: yAxis.show,
        name: yAxis.name,
        nameLocation: yAxis.nameLocation,
        nameTextStyle: {
      ...yAxis.nameTextStyle
      },
      axisLine: {
        show: yAxis.axisLine.show,
          lineStyle: {
          color: yAxis.axisLine.lineStyle.color
        }
      },
      axisTick: {
        show: yAxis.axisTick.show
      },
      axisLabel: {
        show: yAxis.axisLabel.show,
          color: yAxis.axisLabel.color,
          fontSize: yAxis.axisLabel.fontSize,
          rotate: yAxis.axisLabel.rotate
      },
      splitLine: {
        show: yAxis.splitLine.show,
          lineStyle: {
          color: yAxis.splitLine.lineStyle.color,
            type: yAxis.splitLine.lineStyle.type,
            width: yAxis.splitLine.lineStyle.width
        }
      }
    },
    opt.xAxis = {
      show: xAxis.show,
        name: xAxis.name,
        nameLocation: xAxis.nameLocation,
        nameTextStyle: {
      ...xAxis.nameTextStyle
      },
      axisLine: {
        show: xAxis.axisLine.show,
          lineStyle: {
          color: xAxis.axisLine.lineStyle.color
        }
      },
      axisTick: {
        show: xAxis.axisTick.show
      },
      axisLabel: {
        show: xAxis.axisLabel.show,
          color: xAxis.axisLabel.color,
          fontSize: xAxis.axisLabel.fontSize,
          rotate: xAxis.axisLabel.rotate
      },
      splitLine: {
        show: xAxis.splitLine.show,
          lineStyle: {
          color: xAxis.splitLine.lineStyle.color
        }
      }
    }
  }

  return opt
}

// 图表-默认数据
export const barData = {
  legends: ['视频', '广告', '搜索引擎', '抖音'],
  names: ['一月', '二月', '三月', '四月', '五月'],
  values: [
    [20, 40, 50, 60, 70],
    [30, 35, 40, 45, 48],
    [40, 15, 10, 23, 10],
    [11, 22, 33, 44, 55]
  ],
  stacks: {
    '视频': 'stack1',
    '广告': 'stack1',
    '搜索引擎': 'stack2',
    '抖音': 'stack2'
  }
}
// 简单数据
export const simpleData = [
  {name: '柳家湾', value: 1000},
  {name: '朱溪村', value: 980},
  {name: '宁厂村', value: 950},
  {name: '丰旺村', value: 450},
  {name: '鸿兴村', value: 876},
  {name: '灵珠村', value: 345},
  {name: '月山村', value: 565},
  {name: '仙槎社区', value: 654}
]

// 解构数据
export const deconstructData = (data, option) => {
  const legends = []
  const series = []

  data.forEach(item => {
    legends.push(item.name)
    series.push({
      ...option,
      data: item.data
    })

  })

  return {legends, series}
}
